<template>
  <div>
    <!-- 头部 -->
    <MyHeader />
    <!-- 轮播 -->
    <el-carousel trigger="click" height="500px">
      <el-carousel-item v-for="item in 4" :key="item">
        <div class="relative">
          <img class="block h-[500px] absolute left-[50%] translate-x-[-50%]"
            src="https://www.itheima.com/images/slidead/HOMEPAGE/20220225141202%E6%9D%8E%E5%BC%80%E5%A4%8D-banner%E5%AE%9A%E7%A8%BF1920x432(1).jpg"
            alt="">
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- 编程的好处 -->
    <div class="text-center my-[60px]">
      <div class="text-[30px] text-[#333] leading-[60px]">孩子为什么要学编程</div>
      <div class="text-[18px] text-[#666]">用编程培养未来世界的创造者，让孩子理解科技、锻炼思维、提升能力</div>
    </div>
    <div class="w-1200 m-auto grid grid-cols-3 gap-[40px]">
      <div class="text-center" v-for="item in 6" :key="item">
        <img class="w-100 block m-auto" src="../assets/images/temp1.png" alt="">
        <div class="text-[20px] text-[#333] leading-[60px]">培养逻辑思维与创造力</div>
        <div class="text-[14px] text-[#666]">编程是与电脑沟通的过程，将打破常规思维，注重逻辑思考</div>
      </div>
    </div>

    <!-- 课程体系 -->
    <div class="bg-[#f5f9ff] py-[60px]  mt-[60px] section" id="section1">
      <div class="text-center mb-[50px]">
        <div class="text-[30px] text-[#333] leading-[60px]">如何选择适合孩子的课程</div>
        <div class="text-[18px] text-[#666]">用编程培养未来世界的创造者，让孩子理解科技、锻炼思维、提升能力</div>
      </div>
      <div class="w-1200  m-auto grid grid-cols-3 gap-[40px]">
        <div
          class="bg-[#fff] shadow-xl rounded-[12px] overflow-hidden transition  hover:-translate-y-[10px] hover:shadow-2xl"
          v-for="item in 3" :key="item">
          <img src="../assets/images/temp2.png" alt="">
          <div class="p-[20px]">
            <div class="text-[24px] text-[#2c3040] leading-[40px]">理解AI，掌握未来</div>
            <div class="text-[16px] text-[#8b8c9c]">编程是与人工智能沟通的语言，学习编程，让孩子成为未来世界的创造者，为未来更好的适应社会提供保障</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 为什么选择 栏目图 -->
    <div class="section" id="section2">
      <div class="relative h-[230px] overflow-hidden ">
        <img class="block h-[230px] absolute left-[50%] translate-x-[-50%]" src="../assets/images/temp3.png" alt="">
        <div class="text-center relative  mt-[60px]">
          <div class="text-[30px] text-[#333] leading-[60px]">为什么选择小码王？</div>
          <div class="text-[18px] text-[#666]">小码王的课程好、老师好、授课形式多、学员作品棒、流程智能化、口碑好</div>
        </div>
      </div>
      <!-- 课程优势 -->
      <div class=" pt-[10px] pb-[50px]">
        <div class="text-center mb-[50px]">
          <div class="text-[26px] text-[#333] leading-[40px] mt-[40px]">小码王的课程好</div>
          <div class="w-[60px] h-[4px] bg-primary mx-auto rounded-[4px] mb-[20px]"></div>
          <div class="text-[16px] text-[#666]">小码研究院专家把关，先进教育理念支撑，课程更专业，孩子更喜欢！</div>
        </div>
        <div class="w-1100  m-auto grid grid-cols-4 gap-[20px]">
          <div
            class="p-[18px] bg-[#fff] shadow-[0_0px_30px_-15px_rgba(0,0,0,0.3)] rounded-[10px] overflow-hidden transition"
            v-for="item in 4" :key="item">
            <div class="">
              <div class="text-[18px] text-[#2c3040] mb-[10px]">理解AI，掌握未来</div>
            </div>
            <div class="relative h-[140px] overflow-hidden item-kecheng">
              <img class="h-full w-full block" src="../assets/images/temp2.png" alt="">
              <div class="h-[140px] absolute bg-primary bottom-[-170px] left-0  p-[10px]  item-desc">
                <div class=" text-[16px] text-[#8b8c9c]">编程是与人工智能沟通的语言，学习编程，让孩子成为未来世界的创造者，为未来更好的适应社会提供保障</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 师资优势 -->
      <div class="text-center mb-[50px]">
        <div class="text-[26px] text-[#333] leading-[40px] mt-[40px]">师资好</div>
        <div class="w-[60px] h-[4px] bg-primary mx-auto rounded-[4px] mb-[20px]"></div>
        <div class="text-[16px] text-[#666]">小码研究院专家把关，先进教育理念支撑，课程更专业，孩子更喜欢！</div>
      </div>
      <div class="w-1100 m-auto grid grid-cols-3 gap-[40px]">
        <div v-for="item in 3" :key="item" class="relative overflow-hidden  rounded-[4px]">
          <div class="absolute left-0 right-0 top-0 bottom-0  px-[40px] py-[30px] z-10">
            <div class="text-[20px] color-[#151515] mb-[10px]">专职课研大牛</div>
            <div class="text-[14px] color-[#5d5d5d]">前沿技术与实战带入课程</div>
          </div>
          <img src="../assets/images/sz_bg1.png" class="w-full" alt="">
        </div>
      </div>
      <div class="w-1100 mx-auto my-[40px]  teahcer-container">
        <el-carousel indicator-position="none" trigger="click" height="400px">
          <el-carousel-item v-for="item in 4" :key="item">
            <div class="flex pt-[10px] px-[40px]">
              <img class="w-[285px] mr-[40px]" src="../assets/images/tea22.png" alt="">
              <div class="flex-1 pt-[40px]">
                <div class="text-[22px] text-[#111] mb-[10px]">张老师</div>
                <div class="flex">
                  <el-tag class="mr-[10px]" type="success">课程研究院</el-tag>
                  <el-tag class="mr-[10px]" type="warning">风趣</el-tag>
                  <el-tag class="mr-[10px]" type="warning">风趣</el-tag>
                  <el-tag class="mr-[10px]" type="warning">风趣</el-tag>
                  <el-tag class="mr-[10px]" type="warning">风趣</el-tag>
                </div>
                <div class="mt-[40px] text-[16px] color-[#0d1f39] leading-[26px]">
                  主导研发分布式电商项目《淘淘商城》，受益学生众多，被网友称为"JavaEE必学项目课程"。</div>
                <div class="text-[14px] text-[#666] mt-[20px]">目前主导黑马AI教学软件的研发。 擅长多门混合语言的软件开发，C</div>
                <el-button round type="warning" class="mt-[50px]">预约免费试听</el-button>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 教学流程 -->
      <div class="text-center mb-[50px]">
        <div class="text-[26px] text-[#333] leading-[40px] mt-[40px]">教学流程智能化</div>
        <div class="w-[60px] h-[4px] bg-primary mx-auto rounded-[4px] mb-[20px]"></div>
      </div>
      <div class="process-content">
        <div class="content flex justify-center items-center">小码研究院专家把关，先进教育理念支撑，课程更专业，孩子更喜欢！</div>
      </div>
      <!-- 口碑好 -->
      <div class="bg-[#f5f9ff] pt-[10px] py-[20px]">
        <div class="text-center mb-[50px]">
          <div class="text-[26px] text-[#333] leading-[40px] mt-[40px]">口碑好</div>
          <div class="w-[60px] h-[4px] bg-primary mx-auto rounded-[4px] mb-[20px]"></div>
          <div class="text-[16px] text-[#666]">小码研究院专家把关，先进教育理念支撑，课程更专业，孩子更喜欢！</div>
        </div>
        <div class="flex w-1100 m-auto justify-between">
          <div class="w-820">
            <div class="bg-[#fff] h-[280px] rounded-[10px] flex p-[20px]">
              <img class="w-[280px] object-cover mr-[20px]" src="../assets/images/temp2.png" alt="">
              <div>
                <div class="text-[18px] leading-[60px]">小能马真的用心在做教育</div>
                <div class="text-[14px] leading-[24px] indent-[2em] text-[#666]">
                  做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育小能马真的用心在做教育
                </div>
              </div>

            </div>
          </div>
          <div class="w-240">
            <div class="bg-[#fff] h-[80px] mb-[20px] rounded-[4px]">
              <div class="text-center leading-[80px] text-[20px] tracking-[4px]">老师好</div>
            </div>
            <div class="bg-[#fff] h-[80px] mb-[20px] rounded-[4px]">
              <div class="text-center leading-[80px] text-[20px] tracking-[4px]">服务好</div>
            </div>
            <div class="bg-[#fff] h-[80px] mb-[20px] rounded-[4px]">
              <div class="text-center leading-[80px] text-[20px] tracking-[4px]">质量好</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学员风采 -->
    <div id="section3" class="section">
      <div class="text-center my-[60px]">
        <div class="text-[30px] text-[#333] leading-[60px]">学员风采</div>
        <div class="text-[18px] text-[#666]">用编程培养未来世界的创造者，让孩子理解科技、锻炼思维、提升能力</div>
      </div>
      <div class="w-1200 m-auto grid grid-cols-4 gap-[20px] pb-[40px]">
        <div
          class="bg-[#fff] rounded-[5px] p-[15px] shadow-[0_0px_30px_-15px_rgba(0,0,0,0.3)]  transition  hover:-translate-y-[10px] hover:shadow-2xl"
          v-for="item in 8" :key="item">
          <img class="block m-auto" src="../assets/images/temp2.png" alt="">
          <div class="text-[16px] text-[#333] mt-[15px] mb-[5px]">培养逻辑思维与创造力</div>
          <div class="text-[14px] text-[#666]">编程是与电脑沟通的过程，将打破常规思维，注重逻辑思考</div>
        </div>
      </div>
    </div>
    <!-- 赛事活动 -->
    <div class="saishi-bg overflow-hidden section" id="section4">
      <div class="text-center my-[60px]">
        <div class="text-[30px] text-[#333] leading-[60px]">赛事活动</div>
        <div class="text-[18px] text-[#666]">用编程培养未来世界的创造者，让孩子理解科技、锻炼思维、提升能力</div>
      </div>
      <div class="w-1100 mx-auto mb-[60px]">
        <el-carousel indicator-position="none" trigger="click">
          <el-carousel-item v-for="item in 4" :key="item">
            <div class="flex pt-[10px]">
              <img class="w-[420px] h-[280px] object-cover mr-[30px] " src="../assets/images/temp2.png" alt="">
              <div class="flex-1 pr-[60px]">
                <div class="mt-[10px] text-[20px] color-[#0d1f39] leading-[26px]">
                  主导研发分布式电商项目《淘淘商城》，受益学生众多，被网友称为"JavaEE必学项目课程"。</div>
                <div class="text-[14px] text-[#666] mt-[20px] indent-[2em]">
                  目前主导黑马AI教学软件的研发。目前主导黑马AI教学软件的研发。目前主导黑马AI教学软件的研发。目前主导黑马AI教学软件的研发。目前主导黑马AI教学软件的研发。目前主导黑马AI教学软件的研发。
                  擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C擅长多门混合语言的软件开发，C
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

    </div>
    <!-- 联系校区 -->
    <div class="bg-[#f5f9ff] overflow-hidden section" id="section5">
      <div class="text-center my-[60px]">
        <div class="text-[30px] text-[#333] leading-[60px]">联系校区</div>
        <div class="text-[18px] text-[#666]">用编程培养未来世界的创造者，让孩子理解科技、锻炼思维、提升能力</div>
      </div>
      <div class="w-1200 mx-auto mb-[60px]">
        <div
          class="bg-[#fff] rounded-[10px] p-[20px] flex mb-30 shadow-[0_0px_30px_-15px_rgba(0,0,0,0.3)]  transition  hover:shadow-2xl">
          <img class="h-[200px] mr-[20px]" src="../assets/images/temp2.png" alt="">
          <div class="flex-1 flex justify-between items-center">
            <div>
              <div class="text-[18px]  font-bold leading-[40px]">蜀山中桥校区</div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <Position />
                </el-icon> 校区地址：蜀山区休宁路中桥中心A座201室
              </div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <User />
                </el-icon> 联系老师：秦老师
              </div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <Phone />
                </el-icon>联系方式：微信/电话:13156579669
              </div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <Timer />
                </el-icon>工作时间：微信/电话:13156579669
              </div>
            </div>
            <div>
              <img class="h-[120px]" src="../assets/images/ewm.png" alt="">
              <div class="text-[12px] text-center text-[#888]">扫一扫，添加老师</div>
            </div>
          </div>
        </div>
        <div
          class="bg-[#fff] rounded-[10px] p-[20px] flex mb-30 shadow-[0_0px_30px_-15px_rgba(0,0,0,0.3)]  transition   hover:shadow-2xl">
          <img class="h-[200px] mr-[20px]" src="../assets/images/temp2.png" alt="">
          <div class="flex-1 flex justify-between items-center">
            <div>
              <div class="text-[18px] font-bold leading-[40px]">蜀山中桥校区</div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <Position />
                </el-icon> 校区地址：蜀山区休宁路中桥中心A座201室
              </div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <User />
                </el-icon> 联系老师：秦老师
              </div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <Phone />
                </el-icon>联系方式：微信/电话:13156579669
              </div>
              <div class="leading-[34px] text-[#666] text-[14px] ">
                <el-icon>
                  <Timer />
                </el-icon>工作时间：微信/电话:13156579669
              </div>
            </div>
            <div>
              <img class="h-[120px]" src="../assets/images/ewm.png" alt="">
              <div class="text-[12px] text-center text-[#888]">扫一扫，添加老师</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 底部 -->
    <MyFooter></MyFooter>

    <!-- 返回顶部 -->
    <el-backtop :right="70" :visibility-height="2600" :bottom="100" />

    <!-- 侧边栏 -->
    <div class="w-88 bg-white shadow-[0_0px_4px_0px_rgba(140,141,160,0.32)] rounded-[56px] pt-[16px] px-[12px] text-center fixed z-[9999] right-[50px] bottom-[180px]">
      <div class="mb-[24px] cursor-pointer phone-box">
        <img class="w-64  block h-[64px]" src="../assets/images/concat.png" alt="">
        <div class="mt-[8px] text-[12px]   font-[600] text-[#666]">电话咨询</div>
        <div class="none  absolute top-[22px] left-[-175px] phone-tel">
          <img src="../assets/images/tel-bg.png" class="w-[164px] h-[64px]" alt="">
          <div class="absolute z-[999] left-[13px] top-[6px] text-[#fff]">
            <div class="text-[20px] font-[700]">151 5605 1180</div>
            <div class="text-[12px] font-[400] text-[#f2a13c] bg-white leading-[18px] px-[6px] rounded-[30px] ">工作时间: 9:00 ~ 21:00</div>
          </div>
        </div>
      </div>
      <div  class="mb-[24px]  cursor-pointer" @click="showForm=true">
        <img class="w-64 block h-[64px]" src="../assets/images/concat2.png" alt="">
        <div class="mt-[8px] text-[12px]   font-[600] text-[#666]">报名留言</div>
      </div>
    </div>
    <!-- 留言表单 -->
     <MyForm  v-model="showForm" />



  </div>

</template>
<script setup lang="ts">
import MyHeader from '@/components/MyHeader';
import MyFooter from '@/components/MyFooter';
import MyForm from '@/components/MyForm';
const showForm = ref(false)
</script>
<style lang="sass" scoped>

</style>
